vue
<template>
	<view style="margin-left: 30px; margin-right: 30px; padding-top: 20px;">
		<button @click="notworkdown()"> 下载图片</button>
		<button @click="notworkdownvoid()" style="margin-top: 15px;"> 下载视频</button>
		
		<!-- 显示下载的图片（仅图片下载成功后显示） -->
		<view v-if="imageURL && isImage" style="margin-top: 20px;">
			<text style="font-size: 14px; color: #666;">下载的图片：</text>
			<image 
				:src="imageURL" 
				style="width: 100%; max-width: 500px; height: auto; margin-top: 10px; border: 1px solid #eee; border-radius: 8px;"
				mode="widthFix"
			></image>
		</view>
		
		<!-- 显示下载进度信息 -->
		<view style="margin-top: 20px; font-size: 14px; color: #666; line-height: 1.6;">
			<view v-if="progress > 0 && progress < 100">
				<text>下载进度：{{ progress }}%</text>
			</view>
			<view v-if="progress === 100">
				<text style="color: #00aa00;">下载完成！</text>
			</view>
			<view v-if="written > 0">
				<text>已下载：{{ formatSize(written) }}</text>
			</view>
			<view v-if="expected > 0">
				<text>总大小：{{ formatSize(expected) }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageURL: '',  // 下载文件的临时路径
				progress: 0,   // 下载进度
				written: 0,    // 已下载字节数
				expected: 0,   // 总字节数
				isImage: false // 标记是否是图片（用于区分图片和视频）
			}
		},
		methods: {
			// 格式化文件大小（B -> KB/MB）
			formatSize(bytes) {
				if (bytes < 1024) return bytes + ' B';
				if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
				return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
			},
			
			// 下载图片
		    notworkdown() {
		    	this.isImage = true; // 标记为图片
		    	this.progress = 0;  // 重置进度
		      this.downloadTask = wx.downloadFile({
		        url: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg', 
		        success: (res) => {
		          if (res.statusCode === 200) {
		            this.imageURL = res.tempFilePath; // 保存图片临时路径
		          }
		        },
		        fail: (err) => {
		          console.error('下载失败：', err);
		          wx.showToast({ title: '下载失败', icon: 'none' });
		        }
		      });
		      
		      // 监听下载进度
		      this.downloadTask.onProgressUpdate((res) => {
		        this.progress = res.progress; 
		        this.written = res.totalBytesWritten; 
		        this.expected = res.totalBytesExpectedToWrite; 
		        console.log('下载进度：', res.progress + '%');
		        console.log('已下载：', this.formatSize(res.totalBytesWritten));
		        console.log('总大小：', this.formatSize(res.totalBytesExpectedToWrite));
		      });
		    },
		    
			// 下载视频
			notworkdownvoid() {
				this.isImage = false; // 标记为视频
				this.progress = 0;    // 重置进度
			  this.downloadTask = wx.downloadFile({
			    url: 'https://media.w3.org/2010/05/sintel/trailer.mp4', 
			    success: (res) => {
			      if (res.statusCode === 200) {
			        this.imageURL = res.tempFilePath; // 保存视频临时路径
			        wx.showToast({ title: '视频下载完成', icon: 'none' });
			      }
			    },
			    fail: (err) => {
			      console.error('下载失败：', err);
			      wx.showToast({ title: '下载失败', icon: 'none' });
			    }
			  });
			  
			  // 监听下载进度
			  this.downloadTask.onProgressUpdate((res) => {
			    this.progress = res.progress; 
			    this.written = res.totalBytesWritten; 
			    this.expected = res.totalBytesExpectedToWrite; 
			    console.log('下载进度：', res.progress + '%');
			    console.log('已下载：', this.formatSize(res.totalBytesWritten));
			    console.log('总大小：', this.formatSize(res.totalBytesExpectedToWrite));
			  });
			},
		  }
		}
</script>

<style>
button {
	padding: 12px 20px;
	background-color: #007AFF;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 16px;
}
</style>